<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具有交互的柱状图</title>
    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
<body>
    <!-- SVG -->
    <h1>SVG</h1>
    <div class="svgBox">
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        // 准备画布
        let boxWidth = 400;     // 画布宽
        let boxHeight = 400;    // 画布高
        let svg = d3.select('.svgBox')    // 选择文档中的div.svgBox元素
            .append('svg')      // 添加一个svg元素
            .attr('width', boxWidth)    // 设置宽度
            .attr('height', boxHeight)    // 设置高度
            .style('background-color', '#eee')
            .style('border', '1px solid black');

        let dataSet = [23, 6, 45, 22, 92, 54, 68];
        let xTitle = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        let pad = { left: 40, right: 50, top: 20, bottom: 50};
        let rectWidth = 25; // 矩形宽

        // 比例尺
        let xLinear = d3.scaleBand()
            .domain(xTitle)
            .range([0, boxWidth - pad.right - pad.left]);

        // console.log(xLinear.bandwidth()); // 每个band的宽度

        let yLinear = d3.scaleLinear()
            .domain([0, d3.max(dataSet)])
            .range([boxHeight - pad.bottom - pad.top, 0]);
        yLinear.nice(); // 调整坐标轴的刻度显示（简单讲：美化数据，可以注释试试，看y轴的显示效果。）

        // 画坐标轴
        // y轴
        let yAxis = d3.axisLeft(yLinear);
        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', `translate(${pad.left}, ${pad.bottom})`)
            .call(yAxis);
        // x轴
        let xAxis = d3.axisBottom(xLinear).ticks(7);
        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', `translate(${pad.left}, ${boxHeight - pad.top})`)
            .call(xAxis);

        // 画矩形
        /* 注意：
        *   在执行动画时，要注意柱形图是由上向下绘制的，因为我们设置的y轴的比例尺的值是 反 的。
        *   先要让矩形定位在最大值处，也就是从x轴处开始，然后过渡开始才向上升起。
        * */
        svg.selectAll('rect')
            .data(dataSet)
            .enter()
            .append('rect')
            .attr('transform', `translate(${pad.left}, ${pad.bottom})`)
            .attr('x', (d, i) => {
                return i * xLinear.bandwidth() + (xLinear.bandwidth() - rectWidth)/2;
            })
            .attr('y', () => yLinear(yLinear.domain()[0]))
            .attr('width', rectWidth)
            .attr('height', () => 0)
            .attr('fill', 'steelblue')
            .on('mouseover', function (d, i) {
                // 颜色随机
                d3.select(this).attr('fill', `#${Math.floor(Math.random()*9e5)+1e5}`);
            })
            .on('mouseout', function(d, i) {
                d3.select(this)
                    .transition()
                    .duration(300)
                    .attr('fill', 'steelblue');
            })
                    /* 一定特别注意
                    *   这里简单对比使用普通的函数和使用箭头函数的this指向问题
                    * */
            .on('click', function () {
                // console.log(this);
                console.log(Math.floor(Math.random()*9e5)+1e5);
            })
            // .on('click', () => {
            //     console.log(this);
            // })
            .transition()
            .duration(500)
            .ease(d3.easeBounce)   // 过渡的方式：在最终状态处弹跳几次
            .delay(function(d,i){
                return i * 200;
            })
            .attr('y', (d) => yLinear(d))
            .attr('height', (d) => {
                return boxHeight - pad.bottom - pad.top - yLinear(d);
            });

        // 画文字(添加文字元素)
        svg.selectAll('.myText')
            .data(dataSet)
            .enter()
            .append('text')
            .attr('transform', `translate(${pad.left}, ${pad.bottom})`)
            .attr('x', (d, i) => {
                return i * xLinear.bandwidth() + (xLinear.bandwidth() - rectWidth)/2;
            })
            .attr('y', () => yLinear(yLinear.domain()[0]))
            .text( (d) => d)
            .transition()
            .duration(500)
            .ease(d3.easeBounce)   // 过渡的方式：在最终状态处弹跳几次
            .delay(function(d,i){
                return i * 200;
            })
            .attr('y', (d) => {
                return yLinear(d) - 8;
            });
    </script>
</body>
</html>